// 历史出单查询
<template>
  <div class="oilInlet-container">
    <van-nav-bar
      class="app-nav-bar"
      title="历史出单查询"
      left-arrow
      @click-left="$router.back()"
    />
    <van-search
      v-model="searchCar"
      show-action
      label="车牌号"
      placeholder="请输入要查询的车牌号"
      @search="onSearch(searchCar)"
    >
      <template #action>
        <div @click="onSearch(searchCar)">搜索</div>
      </template>
    </van-search>
    <el-table show-summary :data="list" border>
      <el-table-column prop="car_number" label="车牌号" width="80px">
      </el-table-column>
      <el-table-column prop="leave_date" label="去时日期">
      </el-table-column>
      <el-table-column prop="back_date" label="回时日期">
      </el-table-column>
      <el-table-column prop="profit" label="该次盈利"> </el-table-column>
      <el-table-column label="操作" width="100px">
        <template slot-scope="scope">
          <el-button
          type="primary" icon="el-icon-edit" circle
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"></el-button>
          <el-button
          round
            size="mini"
            type="danger" icon="el-icon-delete" circle
            @click="handleDelete(scope.$index, scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getIssueForm, destroy } from '@/api/issue'
export default {
  name: 'oilDetailedIndex',
  components: {},
  props: {},
  data () {
    return {
      searchCar: '',
      list: []
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.getInfo()
  },
  methods: {
    getInfo () {
      getIssueForm().then(res => {
        this.list = []
        console.log('获取信息', res)
        for (let i = 0; i < res.data.data.length; i++) {
          this.list.push(res.data.data[i])
        }
      }).catch(err => {
        console.log(err)
      })
    },
    onSearch (val) {
      this.list = []
      // console.log(val)
      this.$toast.loading({
        message: '查询中...', // 提示文本
        forbidClick: true, // 禁止背景点击
        duration: 0 // 展示时长ms 值为0时 toast不会消失
      })
      getIssueForm({
        car_number: val
      }).then(res => {
        console.log('获取信息', res)
        if (res.data.data.length !== 0) {
          for (let i = 0; i < res.data.data.length; i++) {
            this.list.push(res.data.data[i])
          }
          this.$toast.success('查询成功')
        } else {
          this.$toast.fail('输入有误')
        }
      }).catch(err => {
        console.log(err)
      })
    },
    onCancel () {
      console.log('取消')
    },
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      console.log(index, row)
      this.$dialog.confirm({
        title: '警告',
        message: '确认要删除吗'
      })
        .then(() => {
          // on confirm
          destroy({
            id: row._id
          }).then(res => {
            console.log('res', res)
            this.$toast.success('删除成功')
            setTimeout(() => {
              window.location.reload()
            }, 1000)
            // this.getInfo()
          }).catch(err => {
            console.log('err', err)
            this.$toast.fail('删除失败')
            // window.location.reload()
          })
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>

<style scoped lang="scss">
.van-field {
  border-radius: 10px;
  // margin: 16px 0;
}
.tab_field {
  padding: 0 10px;
}
// .van-button--normal {
//     padding: 0 0.4rem;
//     font-size: 0.37333rem;
//     border-radius: 10px;
// }
.field-btn {
  border-radius: 10px;
  background-color: rgba(25, 137, 250, 0.7);
}
</style>
